<template>
  <div class="container common-box">
    <div class="nav-bar">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>前端管理</el-breadcrumb-item>
        <el-breadcrumb-item>字典管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <Search
      class="search"
      :searchList='searchList'
      size="small"
      @search="searchHandle('search', $event)"
      @refresh="searchHandle('refresh', $event)"
    />

    <div class="container-main">
      <MainAsideNav
        :data="asdieData"
        topText="添加字典类型"
        topType="add"
        @select="changeData"
        @handle="dataGroupHandle"
        @btnHandle="menuInfo"
      />
      <div class="main-table">
        <div class="table-title">
          当前字典:
          <span v-if="currentDataGroup != '暂未选择'">{{ currentDataGroup }}(字典编号：{{currentDataGroupId}})</span>
          <el-button class='ml-20' type="primary" size="small" @click="datatypeHandle({type: 'add'})">新增字典详情</el-button>
        </div>
        <el-table :data="tableData" border style="width: 100%" size="small" :v-loading="tableLoading" max-height="500">
          <el-table-column label="序号" width="80" type="index"/>
          <el-table-column prop="grouptype" label="字典类型标识" max-width="200" />
          <el-table-column prop="name" label="字典名称" max-width="200" />
          <el-table-column prop="code" label="字典编码" max-width="200" />
          <el-table-column
            label="操作"
            width="200"
            fixed="right" >
            <template slot-scope="{row}">
              <el-button type="text" size="small" @click="datatypeHandle({type: 'see', item: row})">查看</el-button>
              <el-button type="text" size="small" @click="datatypeHandle({type: 'edit', item: row})">编辑</el-button>
              <el-button type="text" size="small" @click="datatypeHandle({type: 'delete', item: row})">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 字典类型 -->
    <el-dialog :title="dataGroupDialogType == 'add' ? '添加字典类型' :  dataGroupDialogType == 'see' ? '查看字典类型' : '修改字典类型'" :visible.sync="dataGroupDialog">
      <el-form ref="dataGroupForm" :model="dataGroupData" label-width="150px" :rules="rules">
        <el-form-item label="字典类型标识" prop="grouptype">
          <el-input v-model="dataGroupData.grouptype" size="mini" :disabled="dataGroupDialogType == 'see'" :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="字典类型名称" prop="name">
          <el-input v-model="dataGroupData.name" size="mini" :disabled="dataGroupDialogType == 'see'" :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input v-model="dataGroupData.remarks" size="mini" :disabled="datatypeDialogType == 'see'" :maxlength="200" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" v-if="dataGroupDialogType != 'see'">
        <el-button @click="dataGroupDialog = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="submitDataGroup()" size="mini">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 字典详情 -->
    <el-dialog :title="datatypeDialogType == 'add' ? '添加字典详情' :  datatypeDialogType == 'see' ? '查看字典详情' : '修改字典详情'" :visible.sync="datatypeDialog">
      <el-form ref="datatypeForm" :model="datatypeData" label-width="150px" :rules="rules">
        <el-form-item label="字典详情名称" prop="name">
          <el-input v-model="datatypeData.name" size="mini" :disabled="datatypeDialogType == 'see'" :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="字典详情编码" prop="code">
          <el-input v-model="datatypeData.code" size="mini" :disabled="datatypeDialogType == 'see'" :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input v-model="datatypeData.remarks" size="mini" :disabled="datatypeDialogType == 'see'" :maxlength="200" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" v-if="datatypeDialogType != 'see'">
        <el-button @click="datatypeDialog = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="submitDatatype()" size="mini">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import MainAsideNav from '../../components/Common/MainAsideNav'
import Search from '../../components/Common/Search'

export default {
  created() {
    this._getDataGroupPage()
  },
  data() {
    return {
      searchList: [
        { value: '', key: 'name', type: 'input', placeholder: '请输入字典类型名称' }
      ],
      searchForm: {},
      tableData: [],
      tableLoading: false,
      currentDataGroup: '暂未选择',
      currentDataGroupId: '',
      currentDataGroupObj: {},
      currentMenuIndex: 0,
      asdieData: [],
      // 字典类型相关
      dataGroupDialog: false,
      dataGroupData: {},
      dataGroupDialogType: '',
      // 字典详情相关
      datatypeDialog: false,
      datatypeData: {},
      datatypeDialogType: '',
      rules: {
        // name: [
        //     { required: true, message: '请输入字典名称', trigger: 'blur' },
        // ],
        // grouptype: [
        //     { required: true, message: '请选择字典类型标识', trigger: 'blur' },
        // ],
        // code: [
        //     { required: true, message: '请选择字典详情编码', trigger: 'blur' },
        // ],
      }
    }
  },

  components: {
    MainAsideNav,
    Search
  },

  computed: {
  },

  methods: {
    searchHandle(type, form) {
      this.searchForm = form
      if (type === 'search') {
        this._getDataGroupPage({}, form)
      } else if (type === 'refresh') {
        this._getDataGroupPage()
        this.searchList.forEach(item => {
          item.value = ''
        })
      }
    },
    changeData({item, index}) {
      this._groupListPage(item.id)
      this.currentDataGroup = item.name
      this.currentDataGroupId = item.id
      this.currentDataGroupObj = item
    },
    // 打开新增、修改字典
    menuInfo(type) {
      this.dataGroupDialogType = type
      this.dataGroupDialog = true
      this.dataGroupData = {}
    },
    // 字典类型相关操作
    dataGroupHandle({ type, item }) {
      this.dataGroupDialogType = type
      this.currentDataGroupId = item.id
      if (type === 'delete') {
        this.doDataGroupDelete(item.id)
      } else if (type === 'edit' || type === 'see') {
        this.dataGroupDialog = true
        this._getDataGroupLoad(item.id)
      }
    },
    // 字典详情相关操作
    datatypeHandle ({ type, item }) {
      this.datatypeDialogType = type
      if (type === 'delete') {
        this.doDatatypeDelete(item.id)
      } else if (type === 'edit' || type === 'see') {
        this.datatypeDialog = true
        this._getDatatypeLoad(item.id)
      } else if (type === 'add') {
        this.datatypeDialog = true
        const code = this.tableData[this.tableData.length - 1] ? +this.tableData[this.tableData.length - 1].code + 1 : 1
        this.datatypeData = {
          code
        }
      }
    },
    // 提交字典类型表单
    submitDataGroup() {
      this.$refs['dataGroupForm'].validate((valid) => {
        if (valid) {
          let API = 'dataGroupCreate'
          if (this.dataGroupDialogType === 'edit') {
            API = 'dataGroupUpdate'
          }

          this.$api[API](this.dataGroupData, this.currentDataGroupId).then(res => {
            if (res.code === 200) {
              this.$message.success('添加成功')
              this.dataGroupData = {}
              this.dataGroupDialog = false
              this._getDataGroupPage(this.currentDataGroupObj)
            }
          })
        }
      })
    },
    // 提交字典详情表单
    submitDatatype() {
      this.$refs['datatypeForm'].validate((valid) => {
        if (valid) {
          let API = 'datatypeCreate'
          if (this.datatypeDialogType === 'edit') {
            API = 'datatypeUpdate'
          }

          this.$api[API](
            {
              groupId: this.currentDataGroupId,
              ...this.datatypeData
            },
            this.datatypeData.id
          ).then(res => {
            if (res.code === 200) {
              this.$message.success('添加成功')
              this.datatypeData = {}
              this.datatypeDialog = false
              this._getDataGroupPage(this.currentDataGroupObj)
            }
          })
        }
      })
    },
    // 删除单个字典类型
    doDataGroupDelete(id) {
      this.$confirm(`您真的要删除此字典类型吗`, `温馨提示`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        this.$api.dataGroupDelete(id)
          .then(res => {
            if (res.code === 200) {
              this.$message.success('删除成功')
              this.currentDataGroupId = ''
              this.currentDataGroupObj = {}
              this.currentMenuIndex = 0
              this._getDataGroupPage(this.currentDataGroupObj)
            } else {
              this.$message.warning(res.text || '服务器出现错误')
            }
          })
      })
    },
    // 删除单个字典详情
    doDatatypeDelete(id) {
      this.$confirm(`您真的要删除此字典详情吗`, `温馨提示`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        this.$api.datatypeDelete(id)
          .then(res => {
            if (res.code === 200) {
              this.$message.success('删除成功')
              this._getDataGroupPage(this.currentDataGroupObj)
            } else {
              this.$message.warning(res.text || '服务器出现错误')
            }
          })
      })
    },
    // 查询字典目录树
    async _getDataGroupPage(group = {}, form = {}) {
      this.tableLoading = true
      this.$api.dataGroupPage({
        mark: 'list',
        // size: 10000,
        ...form
      }).then(res => {
        if (res.code === 200) {
          this.tableLoading = false
          this.asdieData = res.data
          if (this.asdieData.length > 0) {
            this._groupListPage(group.id || this.asdieData[0].id)
            this.currentDataGroup = group.name || this.asdieData[0].name
            this.currentDataGroupId = group.id || this.asdieData[0].id
            this.currentDataGroupObj = group || this.asdieData[0]
          }
        }
      })
    },
    // 获取对应字典类型详情
    async _getDataGroupLoad(id) {
      let res = await this.$api.dataGroupLoad(id)
      if (res.code === 200) {
        this.dataGroupData = res.data
      }
    },
    // 获取对应字典详情
    async _getDatatypeLoad(id) {
      let res = await this.$api.datatypeLoad(id)
      if (res.code === 200) {
        this.datatypeData = res.data
      }
    },
    // 获取字典类型对应字典详情列表
    async _groupListPage(id) {
      this.tableLoading = true
      let res = await this.$api.groupListPage({
        groupId: id
      })
      this.tableLoading = false
      if (res.code === 200) {
        this.tableData = res.data
      }
    }
  }
}

</script>
<style lang='scss' scoped>
.container-main{
  display: flex;
}

.main-table{
  padding: 10px 0;
  width: calc(100% - 120px);
  box-sizing: border-box;
  margin-left: 20px;
}

.table-title{
  padding-left: 20px;
  margin-bottom: 10px;
  border-left: 3px solid #eee;
  span{
    font-weight: bold;
    margin-left: 10px;
  }
}
.search{
  margin: 15px;
  margin-bottom: 0;
}
</style>
